<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>博客详情页</title>
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/blog_list.css">
	</head>
	
	<body>
		
		<!-- 导航栏 -->
		<div class="nav">
			<img src="img/logo2.jpg" alt="">
			<span>我的博客系统</span>
			<!-- 空白元素 占位置用的 -->
			<div class="spacer"></div>
			<a href="blog_list.html">主页</a>
			<a href="blog_edit.html">写博客</a>
			<a href="#">注销</a>
		</div>
		
		<!-- 版心 -->
		<div class="container">
			<!-- 左侧个人信息 -->
			<div class="left">
				<!-- 左侧基本信息 -->
				<div class="cart">
					<img src="img/doge.png" alt="">
					<h3>猫哥</h3>
					<a href="#">gitee地址</a>
					<div class="counter">
						<span>文章</span>
						<span>分类</span> 
					</div>
					<div class="counter">
						<span>999</span>
						<span>9</span> 
					</div>
				</div>
			</div>
			
			
			
			<!-- 右侧内容信息 -->
			<div class="right">
				<!-- 一个blog对应一份博客 -->
				<div class="blog">
					<!-- 标题 -->
					<div class="title">
						<span>我的第一篇博客</span>
					</div>
					<!-- 日期 -->
					<div class="data">
						<span>20220925</span>
					</div>
					<!-- 博客的内容 -->
					<div class="content">
						<p>认真的helloo，Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis nulla possimus in ratione suscipit iusto eum cum, similique omnis cumque architecto fugit qui natus commodi molestiae doloremque ab pariatur amet?
						</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cumque itaque, vel quasi repudiandae nihil quaerat aspernatur? Reprehenderit officia aspernatur inventore, animi laborum culpa commodi beatae ab nisi id numquam?
						</p>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias consequuntur, quibusdam iure rerum magnam sequi dolorem error aut reiciendis officia asperiores quasi, saepe earum impedit, qui necessitatibus! Explicabo, labore eius.
						</p>
						<p>认真的helloo，Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis nulla possimus in ratione suscipit iusto eum cum, similique omnis cumque architecto fugit qui natus commodi molestiae doloremque ab pariatur amet?
						</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cumque itaque, vel quasi repudiandae nihil quaerat aspernatur? Reprehenderit officia aspernatur inventore, animi laborum culpa commodi beatae ab nisi id numquam?
						</p>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias consequuntur, quibusdam iure rerum magnam sequi dolorem error aut reiciendis officia asperiores quasi, saepe earum impedit, qui necessitatibus! Explicabo, labore eius.
						</p>
						<p>认真的helloo，Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis nulla possimus in ratione suscipit iusto eum cum, similique omnis cumque architecto fugit qui natus commodi molestiae doloremque ab pariatur amet?
						</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cumque itaque, vel quasi repudiandae nihil quaerat aspernatur? Reprehenderit officia aspernatur inventore, animi laborum culpa commodi beatae ab nisi id numquam?
						</p>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias consequuntur, quibusdam iure rerum magnam sequi dolorem error aut reiciendis officia asperiores quasi, saepe earum impedit, qui necessitatibus! Explicabo, labore eius.滚动条 */
						</p>
						<p>认真的helloo，Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis nulla possimus in ratione suscipit iusto eum cum, similique omnis cumque architecto fugit qui natus commodi molestiae doloremque ab pariatur amet?
						</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cumque itaque, vel quasi repudiandae nihil quaerat aspernatur? Reprehenderit officia aspernatur inventore, animi laborum culpa commodi beatae ab nisi id numquam?
						</p>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias consequuntur, quibusdam iure rerum magnam sequi dolorem error aut reiciendis officia asperiores quasi, saepe earum impedit, qui necessitatibus! Explicabo, labore eius.
						</p>
						<p>认真的helloo，Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis nulla possimus in ratione suscipit iusto eum cum, similique omnis cumque architecto fugit qui natus commodi molestiae doloremque ab pariatur amet?
						</p>
						<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cumque itaque, vel quasi repudiandae nihil quaerat aspernatur? Reprehenderit officia aspernatur inventore, animi laborum culpa commodi beatae ab nisi id numquam?
						</p>
						<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias consequuntur, quibusdam iure rerum magnam sequi dolorem error aut reiciendis officia asperiores quasi, saepe earum impedit, qui necessitatibus! Explicabo, labore eius.
						</p>
					</div>
				</div>
			</div>
			
			
			
			
			
		</div>
		
	</body>
</html>
